{% extends 'layout/base.twig' %}
{% import 'macros/helpers.twig' as helpers %}

{% block title %}
- 观察列表 -
{% endblock %}

{% block content %}
<h1>观察函数</h1>

<p>
    观察函数允许你设置函数名称或模式用于显示在每个运行结果页面的顶部
</p>
<p>
    观察函数可以精确匹配或使用PCRE模式匹配多个函数的名字。
</p>

<form class="form-stacked" action="{{ url('watch.save') }}" method="post">
{% if watched|length %}
    <ul class="unstyled watch-list">
        {% for i, watch in watched %}
        <li>
            <input name="watch[{{ i }}][_id]" type="hidden" value="{{ watch._id }}" />
            <input name="watch[{{ i }}][removed]" type="hidden" class="removed" value="0" />
            <input class="input-xlarge" name="watch[{{ i }}][name]" type="text" value="{{ watch.name }}" />
            <a href="#" class="btn btn-small btn-warning watch-delete">删除</a>
        </li>
        {% endfor %}
        <li id="new-row-template">
            <input class="input-xlarge" name="watch[{{ watched|length }}][name]" type="text" />
            <a href="#" class="btn btn-small btn-warning watch-delete">删除</a>
        </li>
    </ul>
    <p class="offset2">
        <a href="#" id="add-new-watch" class="btn">添加一个</a>
    </p>

    <div class="form-actions">
        <input class="btn btn-large btn-primary" type="submit" value="保存" />
    </div>
{% else %}
    <div class="hero-unit">
        <h3>你还没有观察函数</h3>
        <p>观察函数可以让你感兴趣的函数显示在运行结果中。</p>
        <p>开始添加一个</p>
        <input name="watch[0][name]" type="text" />
        <input class="btn btn-primary" type="submit" value="保存" />
    </div>
{% endif %}

</form>

{% endblock %}

{% block jsfoot %}
<script>
$(document).ready(function () {
    var template = $('#new-row-template').html();
    var list = $('.watch-list');
    var placeholder = list.children().length - 1;

    $('.watch-list').on('click', '.watch-delete', function () {
        var row = $(this).parent();
        row.fadeOut('fast', function () {
            row.find('.removed').val(1);
        });
        return false;
    });

    $('#add-new-watch').on('click', function () {
        var numElements = list.children().length;
        var insert = template.replace(placeholder, numElements);
        list.append('<li>' + insert + '</li>');
        return false;
    });
});
</script>
{% endblock %} 
